﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商城-结算页</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        h1 {
            font-size:32px;
            color: #808080;
            text-align:left;
         }
     
         body {
            margin: 24px;
        }

        ul li {
            list-style: none;
        }
      
        span {
            display: inline-block;
            font-size: 20px;
            font-weight: 210;
            margin-bottom: 50px;
        }

        .bill {
            display: inline-block;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 0 !important;
        }

        .nav {
            width: 550px;
            height: 300px;
            margin-top: 22px;
          
        }

        .nav input {
            width: 200px;
            margin-bottom: 22px;
        }

        .nav ul:nth-of-type(1) {
            float: left;
        }

        .nav ul:nth-of-type(2) {
            float: right;
        }

        .text span {
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 0;
        }
        .text span:nth-child(1) {
            display: inline-block;
            font-weight: 200;
            font-size: 20px;
            margin-bottom: 22px;
        }
        .text span:nth-child(3) {
            margin-bottom: 22px;
        }
        .img {
            font-size:12pt;
            font-weight: 200!important;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="header">
        <h1>结算</h1><br>
        <span class="bill">账单信息</span>
    </div>
    <div class="nav">
        <ul>
            <li>
                <label class="recipient">收件人:</label><br>
                <input type="text" id="recipient">
            </li>
            <li>
                <label class="address">地址:</label><br>
                <input type="text" id="address">
            </li>
            <li>
                <label class="postcode">邮编:</label><br>
                <input type="text" id="postcode">
            </li>
        </ul>

        <ul>
            <li>
                <label class="email">电子邮箱:</label><br>
                <input type="text" id="email">
            </li>
            <li>
                <label class="phone">联系电话:</label><br>
                <input type="text" id="phone">
            </li>
        </ul>
    </div>
    <div class="text">
        <h2>购物车</h2><br>
        <span>总金额:&yen; 1688</span><br>
        <span><input type="checkbox"><span class="img">&nbsp;&nbsp;我接受此项服务条款</span></span>
    </div>
  </div>
</body>
</html>